package top.jidanmian.android.mqttdemo.ui.mqtt

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun MqttView(
    model: MqttViewModel = viewModel(),
) {
    val uiState by model.uiState.collectAsState()
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        OutlinedTextField(
            value = uiState.topic,
            onValueChange = { model.updateTopic(it) },
            label = { Text(text = "Topic") }
        )
        OutlinedTextField(
            value = uiState.message,
            onValueChange = { model.updateMessage(it) },
            label = { Text(text = "Message") }
        )
        Row {
            Button(onClick = { model.send() }) {
                Text(text = "发送")
            }
            Button(onClick = { model.subscribe() }) {
                Text(text = "订阅")
            }
            Button(onClick = { model.clean() }) {
                Text(text = "清除")
            }
        }
        Text(text = uiState.testInfo)
    }
}

@Preview(showBackground = true)
@Composable
fun MqttViewPreview() {
    MqttView( )
}